قوالب النصوص جافاسكربت

مقدمة

شهدت لغة جافاسكربت منذ تقديمها في منتصف التسعينيات سلسلةً من التحسينات البنيوية التي ارتقت بالأساليب التعبيرية للمطورين، وكان إدخال قوالب النصوص (Template Literals) مع مواصفة ECMAScript 2015 (ES6) أحد أهم هذه التحسينات؛ إذْ أتاح أسلوباً أكثر مرونة ووضوحاً لبناء السلاسل النصيّة ومعالجتها بفاعلية عالية. يعالج هذا المقال موسّع الجوانب النظرية والعملية لقوالب النصوص، موضحاً بنيتها النحوية، وقدرتها على دمج التعابير، وتعاملها مع المحارف الخاصة، ودورها في توليد المحتوى الديناميكي، بالإضافة إلى التوسّع في القوالب الموسومة (Tagged Templates) وآفاق استخدامها في بناء مكتبات حديثة لمعالجة CSS والرسائل الدولية (i18n) وإضفاء الأمان على التعليمات البرمجية عن طريق التعقيم (Sanitization).

أولاً: السياق التاريخي لقوالب النصوص في جافاسكربت

قبل ES6، اعتمد المطوّرون على عامل الجمع ( + ) لبناء السلاسل النصيّة واعتماد أحرف الهروب (\n, \t, …) لمعالجة الأسطر المتعددة. لكن هذا النمط سرعان ما أصبح معقداً مع نمو حجم التعليمات البرمجية وتداخل المتغيرات. جاءت قوالب النصوص لتحل مجموعة من الإشكالات:

• تحسين القابلية للقراءة: سلاسل نصيّة تمتد عبر أسطر متعددة دون الحاجة لأحرف الهروب.

• حقن القيم ديناميكياً: استعمال تعابير داخل بنيان السلسلة بطريقة موجزة.

• تمهيد الطريق للمعالجة المخصصة: مقدمة للقوالب الموسومة التي تمنح القدرة على إعادة تعريف كيفية تفسير السلسلة.

ثانياً: البنية النحوية لقوالب النصوص

تُكتب قوالب النصوص باستخدام علامتَي Back‑tick  `  بدلاً من علامات الاقتباس المفردة أو المزدوجة. تمتاز بخصائص رئيسية:

1. الأسطر المتعددة

بدلاً من:

js
CopyEdit
const poem = "يا ليلُ طالَ بي السُّرى\nوأنا أتوقُ إلى الضياء";

يمكن كتابة:

js
CopyEdit
const poem = `يا ليلُ طالَ بي السُّرى
وأنا أتوقُ إلى الضياء`;

يُحافظ هذا الأسلوب على تنسيق النص الأصلي في ملف المصدر ومن ثَمّ في الناتج.

2. تضمين التعابير Interpolation

يفتح ${} حقلاً يمكن إدراج أي تعبير جافاسكربت صالح فيه – سواء ثابت رقمي، استدعاء دالة أو حتى عامل ثلاثي:

js
CopyEdit
const price   = 120;
const premium = true;
const msg = `السعر: ${price} دولار${premium ? ' (شامل خدمة مميزة)' : ''}`;

يُقيَّم التعبير في وقت التشغيل ثم يُحوَّل إلى نص.

3. التعامل مع المحارف الخاصة

داخل قوالب النصوص تتوقف الحاجة إلى إحكام الهروب للعديد من المحارف؛ فالمحرف \n لا يُستخدَم إلا إذا أردت إدراج سطر فارغ فعلاً. ومع ذلك تبقى الحاجة لأداء الهروب للمحرف Back‑tick ذاته أو القوس المعقوف $ متعاقباً مع { إذا ظهر بالمعنى الحرفي:

js
CopyEdit
const tricky = `علامة Back-tick: \` والقوس: \$\{`;

ثالثاً: القوالب الموسومة (Tagged Template Literals)

تشكل القوالب الموسومة طبقة أعمق تتيح تمرير قالب النص مع مصفوفة القيم إلى دالة مخصَّصة قبل دمجها النهائي، ويمكّن ذلك من:

1. البناء الشرطي للسلسلة بإزالة أو تعديل مقاطع معيّنة.

2. تعقيم المخرجات لمنع هجمات حقن الشيفرة (XSS).

3. بناء DSL (لغة متخصصة) صغيرة لمعالجة CSS‑in‑JS أو الاستعلامات.

1. التواقيع النحوية

js
CopyEdit
function tag(strings, ...values) {
  // strings: Array يحتوي الأجزاء الثابتة
  // values:  Array يحتوي القيم المضمَّنة
  return /* النتيجة المرغوبة */;
}
const result = tag`مرحــباً ${user} لديك ${messages.length} رسائل.`;

جدول: بنية الوسيطين في دالة التاغ

2. مثال على التعقيم لمنع XSS

js
CopyEdit
function safeHtml(strings, ...values) {
  const esc = v => String(v)
     .replace(/&/g,  '&')
     .replace(/,  '<')
     .replace(/>/g,  '>')
     .replace(/"/g,  '"')
     .replace(/'/g,  ''');
  return strings.reduce(
       (acc, cur, i) => acc + cur + (i < values.length ? esc(values[i]) : ''),
       ''
  );
}
const comment = userInput(); // قد يحتوي شيفرة خبيثة
const html = safeHtml`
${comment}
`;

بهذا، تُستبدَل المحارف الخطرة بكود HTML آمن قبل الإدراج في الصفحة.

3. بناء CSS‑in‑JS

مكتبات مثل styled‑components تعتمد تاغات القوالب لتوليد ملفات CSS أثناء التشغيل:

js
CopyEdit
const Button = styled.button`
  background: ${props => props.primary ? 'red' : 'gray'};
  border-radius: 8px;
  padding: .5rem 1rem;
`;

يَجمع المحرّك الأنماط الناتجة في ملف واحد ويحقنه في